<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
    <title>九型人格测评</title>
</head>

<body>
    <!-- 头部背景 -->
    <div class="banner">
        <!-- logo -->
        <div class="logo">
            <a href="#"><img src="image/logo.png"></a>
        </div>
        <!-- 报告介绍 -->
        <div class="top_info">
            <h2>九型人格测评</h2>
            <div class="top_info_yz">评测报告由<a href="#">[佰智咨询]</a>提供专业支持</div>
            <div class="top_info_yz">测试者&nbsp;:&nbsp;陈静</div>
            <div class="top_info_yz">测评耗时&nbsp;:&nbsp;10分54秒</div>
            <div class="top_info_btn_dowm" style="margin:40px auto 0"><a href="#">下载PDF报告文档</a></div>
        </div>
    </div>
    <div class="container">
        <div class="chart_title">目录</div>
        <!-- 您的报告包含 -->
        <div class="mreport_con_box" style="margin-top:0;padding: 10px 25px;">
            <!-- 具体内容 -->
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>你是第几型？</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>你的素描</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>你的副型</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>如何理解</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
            <div class="mreport_con_flex">
                <!-- 左边文字 -->
                <div class="mreport_con_left">
                    <div class="mreport_con_img"><img src="image/b.png"></div>
                    <div>后记</div>
                </div>
                <!-- 右边目录线 -->
                <div class="mreport_con_right"></div>
            </div>
        </div>
        <!-- 应用第二步结果进行沟通 -->
        <div class="chart_title">你是第几型？</div>
        <div class="describe_box">
            <div class="cr_red text-center" style="font-size:18px">你极有可能属于第一型完美主义者。</div>
            <div class="disc_center_text">你的九型原始分柱状图及折线图：</div>
            <div class="bottom_chart">
                <div id="mao_4"></div>
            </div>
            <div class="bottom_chart">
                <div id="mao_2"></div>
            </div>
            <div class="disc_center_text mt-5">Score and the norm </div>
            <div class="bottom_chart">
                <div id="mao_1"></div>
            </div>
            <div class="disc_center_text mt-5">Score distribution</div>
            <div class="bottom_chart">
                <div id="mao_5"></div>
            </div>
            <div class="disc_center_text mt-5">Difference of score and the norm</div>
            <div class="bottom_chart">
                <div id="mao_3"></div>
            </div>
            <div class="disc_center_text mt-5">差值绝对NegativeZero=+5</div>
            <div class="bottom_chart">
                <div id="nine_3"></div>
            </div>
            <div class="disc_center_text mt-5">Norm distribution</div>
            <div class="bottom_chart">
                <div id="nine_4"></div>
            </div>
            <p class="common_p mt-4">如上数据，你最有可能是第一型完美主义者，最不可能是第五型科学家。</p>
            <p class="common_p mt-4">你的九型人格倾向依次排序为：</p>
            <p class="common_p mt-3">No.1、第一型完美主义者</p>
            <p class="common_p">No.2、第三型实干家</p>
            <p class="common_p">No.3、第二型给予者</p>
            <p class="common_p">No.4、第八型领导者</p>
            <p class="common_p">No.5、第四型悲情浪漫主义者</p>
            <p class="common_p">No.6、第六型怀疑论者</p>
            <p class="common_p">No.7、第九型和事佬</p>
            <p class="common_p">No.8、第七型享乐主义者</p>
            <p class="common_p">No.9、第五型科学家</p>
        </div>
        <div class="chart_title">你的素描</div>
        <div class="describe_box">
            <div class="disc_title">你的基本描述：第一型完美主义者(侧翼：1W2) </div>
            <p class="common_p mt-3">
                第一型人格是九型人格中的性格，名为改革者、完美型、完美主义者、跟从原则者、改进型。健康的第一型非常正直，是非分明，并且有强烈的道德观。他们理性、讲道理、自律、稳健有节制。拥有高度的伦理道德感，对他们而言，真理与正义是最基本的价值观。诚实与正直使他们成为杰出的道德师表、众人的典范、以及真理的见证。他们极有原则，永远要求公正无私、客观公平，愿意为众人的利益提升自己。
            </p>
            <p class="common_p">
                最佳状况：具有极高的智慧与辨别力，超人一等的判断力，不论在什么状况下，似乎总知什么是最好的（就道德上而言）。他们知道事情的轻重缓急、优先级，因此有一种超越的眼光。能给别人智慧的建议，并且有高远的理想和目标。
            </p>
   
            <div class="disc_title mt-3">典型优点：</div>
            <p class="common_p mt-3">道德标准高、是非分明、能快速找到错误</p>

            <div class="disc_title mt-3">典型缺点：</div>
            <p class="common_p mt-3">过于挑剔、用放大镜看瑕疵、唱反调</p>

            <div class="disc_title mt-3">基本恐惧：</div>
            <p class="common_p mt-3">怕自己错、变坏、被腐败。</p>


            <div class="disc_title mt-3">基本欲望：</div>
            <p class="common_p mt-3">希望自己是对的、好的、贞洁的、有诚信的，希望世界是完美的。 世界是黑白分明的，对是对，错是错；做人一定要公正，有节制；做事一定要有效率。 </p>

            <div class="disc_title mt-3">外表与气质：</div>
            <p class="common_p mt-3">外表与气质衣装整齐，严肃认真，目光有神，不苟且。安于本份，勤奋，刻苦耐劳，讲求公正，正义，尽忠职守。</p>

            <div class="disc_title mt-3">健康的特点：</div>
            <p class="common_p mt-3">勤俭、刻苦、节约、自律性高，决定当天要做的事，绝不会拖到第二天、判断力与分析力高、忍耐、讲理、乐于助人与公正无私、道德标准极高</p>
 

            <div class="disc_title mt-3">一般的特点:</div>
            <p class="common_p mt-3">对人严格、爱批评别人、害怕犯错、非黑即白、做事需要一个主观认同的立场，没有中立</p>
 

            <div class="disc_title mt-3">不健康的特点:</div>
            <p class="common_p mt-3">对人不宽容、批评多于赞赏、情绪压抑、心胸狭窄，固执，讨厌人批评自己</p>
 

            <div class="disc_title mt-3">人格升降特征</div>
            <p class="common_p mt-3">处于安定和人格提升时：走向第七型，会放下拘谨的形象，变得风趣幽默，能够自嘲，肯作新尝试，会接纳他人意见。</p>
            <p class="common_p">处于压力和自我防卫时：走向第四型，抑郁，自我批判，有时会自恋自怜，情绪低落，否定自己和充满无用感。</p>


            <div class="disc_title mt-3">侧翼</div>
            <p class="common_p mt-3">1w2： 倾向第二型，会比较热情、友善、愿意帮助和关心别人；也可能更吹毛求疵，好管人。在感情方面较痴情，占有欲强，任性，对情人的遭遇能够感同身受。失望时行为反复无常。
            </p>
            <p class="common_p">1w9： 倾向第九型，性格比较随和老实、轻松、客观和抽离，不受他人影响。</p>


            <div class="disc_title mt-3">为人建议</div>
            <p class="common_p mt-3">
                要做一个典范﹐而不是批评家。不要太注重小节而忽略了整个处境。原谅自己﹐学会知足常乐﹐不要无止境地提高要求﹐折磨自己。鼓励别人批评和提出错误﹐因为你吹毛求疵的形象可能已把别人吓怕﹐做错事都不告诉你﹐这样对你百害而无一利。
            </p>

            <div class="disc_title mt-3">与之相处</div>
            <p class="common_p mt-3">谅解他们对你的批评﹐因为通常他们出于好意。称赞他们做事认真﹐可以的话主动分担一下他们的工作。
                切忌隐瞒事实真相﹔做错事要认真的道歉﹐并承担责任。如果是初犯﹐而是被他们发现你的错误的话，他们通常都会原谅。如果错误是出自你的陋习或不专心﹐不认真的话﹐就麻烦得多了。
                第一型的人是特别重小节的。例如约会切忌迟到（可以的话最好早到﹐因为他们也会）。他们也很重礼节﹐“对不起”﹐“多谢”这些词语绝不可少。
                尽量避免直接否定他们﹐可以反过来问些启发他们思考的问题（例：如果…又会怎样？）﹐营造一个第七型的环境﹐他们会开放很多。 </p>
        </div>
        <div class="chart_title">你的三种副型</div>
        <div class="describe_box">
            <div class="disc_title">背景</div>
            <p class="common_p mt-3">由于你相信在根本上，人是有着一套正确的生活方式，所以你不停警惕自己，寻找那些显示出标准及规则被违反了的证据，你认为必须把这些标准、规则恢复过来，并予以尊重。愤怒（或内疚）警示着标准、规则被践踏了，而你透过改正错误来宣泄愤怒（或内疚）。你认为有人犯错或事情出错时，便需加以纠正及惩戒。事实上，只有在一些你认为重要的规则被（自己及他人）触犯时，你才会感到愤怒或内疚。这份愤怒的能量受到压制，并以副型行为表现出来。</p>
            <div class="disc_title mt-4">自我保存：担心及忧虑/紧张</div>
            <p class="common_p mt-3">作为完美主义者，你相信你的存在是依赖把事情做得正确，生命是关乎本份，而非期望和欲望。你总是担心和忧虑/紧张着，不能让自己犯错或做坏事。你不相信这个世界是包容及原谅过错的，所以最后你总是独个儿在忧虑。你不满生命中的不公平，但那又如何？你仍需拼命地避免受到「内在判官」、「思想及欲望的警觉」的毁灭性惩罚。看起来，你宁愿活得正确、而不用活得快乐，可是「正确」不是以忧虑和担心而换来的。「正确」是自然规律，与希冀及渴望无关。你最大的愿望是：解除忧虑并放松起来、以及得到片刻被允许的欢愉。</p>
            <div class="disc_title mt-4">社交：不能适应/缺乏弹性</div>
            <p class="common_p mt-3">在社交圈中，你把自己守正不阿的原则及相关的紧张及愤怒，都引导到正确的位置上。你有自己坚守及努力争取的标准、法则及立场。你根据这些不二的法则，来修正现有的系统，让它变得更好、更正确。当你认为事情与你攸关时，你会变得不能适应/缺乏弹性，故此你会提出那些与你炽烈的立场为逆的各种元素。你不单找出其它圈子中的不是、指出个中原因、及定断过失，你更务必消除自己的圈子中的不是。你相信只有一个正确之道，而你必定要支持它。</p>
            <div class="disc_title mt-4">一对一：嫉妒/激动</div>
            <p class="common_p mt-3">在一对一的关系中，你会守护着这段关系。你对自己/伴侣或重要人物的行为操守，非常在意及警惕。你认为自己刻尽己份挣得享乐的权利，故此那是别人不能否定的。当你认为他人正在试图穿越时，你会变得充满敌意、极为激动。「没有人可以拿走你应有的」、「他不该这样做」要是你不太理解懂得人的欲望时，你便总是为他的不当念头而在意：「这些不是我想要的，而是你想要的；你不应该有这种想法，这是错的。」你变得更具占有欲，监察着情况，随时会激起正义的怒火。这份敌意围绕对「关系中被认定为重要的东西」——信赖、共处的时刻、受到不应得的赏识、及忠贞等的背弃。</p>

        </div>
        <div class="chart_title">如何理解</div>
        <div class="describe_box">
            <div class="cr_red" style="font-size:16px">一：关于侧</div>
            <div class="row">
                <div class="col-md-9 col-sm-12">
                    <p class="common_p mt-4">侧翼是九型人格学的另一重要概念。每个人有所属的主要性格类型，但几乎没有人是拥有纯正的类型。每人均是两种性格型号的混合体，而在此混合体内之第二种性格型号称之为侧翼。侧翼的位置是在九型人格图象之圆周上，它是处于你所属主要性格型号的其中一边。九型人格图可帮助我们看到各种性格型号，如何混合和性格的侧翼。</p>
                    <p class="common_p mt-4">
                            如右边的九型人格图：<span class="cr_red">我们在可以看到三号只可侧向二号和四号的性格，而不能侧向五号和七号的性格。</span></p>
                </div>
                <div class="col-md-3 col-sm-12">
                    <img src="image/v2_ppb8ul.png" alt="" srcset="">
                </div>
            </div>
            <div class="disc_title mt-3">一号的侧翼</div>
            <p class="common_p mt-3">偏第九型的第一型：这样的第一型蛮可爱的，他们会比较随和，没有那麽严肃，不会随便地迁怒他人，他们会很放鬆，悠閒地享受生命带给他的乐趣。</p>
            <p class="common_p">偏第二型的第一型：偏第二型的第–型会很热心地帮助别人，但也会强迫别人接受他以为好的模式或标准，这时就会变得自我中心，失去理性。</p>
            <div class="disc_title mt-3">二号的侧翼 </div>
            <p class="common_p mt-3">偏第一型的第二型：此种第二型人会比较理性，有彻底的、细致的计画，比较有条理，有较清晰的目标，具有第一型理想主义及客观中立的特质，不过他们也带有第一型那种刻板、挑剔、原则性强、不乐观的特性。</p>
            <p class="common_p">偏第三型的第二型：这样的第二型会变得较为活泼和爱表现，愿意接受别人的帮助，但同时也会带有第三型的自我中心及善于经营的个性。</p>
            <div class="disc_title mt-3">三号的侧翼</div>
            <p class="common_p mt-3">偏第二型的第三型：这样的第三型人物好可爱，他们会不那麽爱出风头，愿意帮助别人，感受他人的感受。</p>
            <p class="common_p">偏第四型的第三型：这类的第三型具备第四型那种灵感及创造力，也具有内向、沉静、敏感、情绪化的特质。</p>
            <div class="disc_title mt-3">四号的侧翼</div>
            <p class="common_p mt-3">偏第三型的第四型：第三型的活力、外向、目标感强使得第四型变得走出个人的情绪，注意自己的形象及社会共同的规则，也变得更有雄心壮志。</p>
            <p class="common_p">偏第五型的第四型：第五型的内向，富有创意，使得第四型变得需要私人空间，创新但会不切实际活力。</p>
            <div class="disc_title mt-3">五号的侧翼</div>
            <p class="common_p mt-3">偏第四型的第五型：接近第四型的第五型会变得有想像力、比较感性、忧郁并富有艺术气质。荣格即属于此类性格。</p>
            <p class="common_p">偏第六型的第五型：这样的人会很理智、分析能力很强、重视团队、务实，但也有爱怀疑、过分担心的第六型特质。</p>
            <div class="disc_title mt-3">六号的侧翼</div>
            <p class="common_p mt-3">偏第五型的第六型：因为倾向于第五型的客观、冷静、严肃，他们比较不会那麽盲目崇拜权威，但容易变得内向、猜疑、自大且富攻击性。</p>
            <p class="common_p">偏第七型的第六型：这样的第六型比较爱焦急，能感觉到谁是他事业上的贵人。</p>
            <div class="disc_title mt-3">七号的侧翼</div>
            <p class="common_p mt-3">偏第六型的第七型：比较注重团体的利益及协作精神，能够更多地顾及他人感受，更加尽责，但也会有更多的担忧、焦虑。</p>
            <p class="common_p">偏第八型的第七型：此类人更看重权力，更喜欢操控别人，具有第八型粗暴、缺乏耐心的性格。</p>
            <div class="disc_title mt-3">八号的侧翼</div>
            <p class="common_p mt-3">偏第七型的第八型：这种人将成为九种型格特徵中的最有意志力及最有冲劲的人。他们精力旺盛、善于抓住人心、有强烈的成功欲望、爱冒险、更有主见。</p>
            <p class="common_p">偏第九型的第八型：这类人变得很受欢迎，他们很有同情心，喜欢支持体谅别人，大度、宽厚、有耐性。</p>
            <div class="disc_title mt-3">九号的侧翼</div>
            <p class="common_p mt-3">偏第八型的第九型：这样的第九型会变得没有那麽畏缩、逃避，他们可以更外向、直接，独立及有决断力。</p>
            <p class="common_p">偏第一型的第九型：这样的第九型会变有理想，有秩序，但易受琐碎事情干扰。</p>
            <div class="cr_red mt-5" style="font-size:16px">二：关于副型</div>
            <p class="common_p mt-3">在人类演化的过程中，存在着三种基本的求生存行为，九型人格学理论称之为副型。副型主要包括三种基本的形式，分别是自我保护行为、社交行为和一对一行为。</p>
            <div class="disc_title mt-3">自我保存行为：</div>
            <p class="common_p mt-3">注意力的焦点主要放在所牵涉个人存活的事情上，比如安全、稳定、舒适、保护及充足的资源等。所有的这些都是为了保证我们能够很好地存活在这个世界上，满足自己日常生活或是更好地生活的需要。他们会努力努力工作积累足够的物质财富才会感觉到一种安全感，才会放心地进入一段婚姻；他们会在家里存储一个周的饭菜以备出现坏天气；周末在家休息的时候，他们会为自己找一大堆的事情做，这样心里才会感觉踏实。</p>
            <div class="disc_title mt-3">社交行为：</div>
            <p class="common_p mt-3">注意力的焦点涉及的范围会很广，会跟随所有牵涉到生活圈和团体的事物，比如，在团体中的角色与地位、社会接受程度、归属感、参与感及友谊等。你会发现副型为社交的人他们会有忙不完的应酬，经常会出现在各种社交场合中；他们经常声称自己的朋友很多，但你会发现他们口中的朋友很多都仅仅是泛泛之交或仅有一面之缘而已。他们喜欢人多的场合，只有在与人交往的过程中才会感受到自身的价值，沉闷、单调的场合会让他们产生窒息感。</p>
            <div class="disc_title mt-3">一对一行为：</div>
            <p class="common_p mt-3">注意力更多的是放在有关亲密关系的事务上，比如跟特定的人维持亲密关系、个人魅力、亲密感、结盟及融合等。副型为一对一的人会把关系看的很重要，在他们的一生中很多重大的挫败都来源于关系。到了一种场合中，他们会首先为自己找一个一对一对象并在彼此间建立一种亲密的关系。他们将亲密的关系看的比物质重要的多，对于自我保护型的人而言没有一定的物质保障可能不会很快走入婚姻生活；但一对一的人则会将房子、车子等看的比感情淡的多。</p>
            <p class="common_p">副型只是一种求生存的方式而言，并没有那种副型更好或那种副型不好之说。这三种副型在每个人的身上都同时存在，只是各自所占的比重不同而已。</p>
        </div>
        <div class="chart_title">后记</div>
        <div class="describe_box">
            <p class="common_p">(1)本报告书内容是依当事人的问卷回答产生的结果。其内容的真实性无法保证。 </p>
            <p class="common_p">(2)本内容运用的领域是针对个人性格参考上，不能视此报告作为唯一的评价依据，且本报告不承担任何形式的法律责任。 </p>
            <div class="thank">Thanks!</div>
        </div>
        <!-- 说明 -->
    </div>




</body>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
    //    得分与平均分
    var mao_1 = [{
        name: '得分',
        '管理型.': 18.9,
        '技术型.': 28.8,
        '安全稳定型.': 39.3,
        '创造型.': 81.4,
        '自主独立型.': 47,
        '服务型.': 20.3,
        '挑战型.': 24,
        '生活型.': 35.6
    }, {
        name: '平均分',
        '管理型.': 12.4,
        '技术型.': 23.2,
        '安全稳定型.': 34.5,
        '创造型.': 99.7,
        '自主独立型.': 52.6,
        '服务型.': 35.5,
        '挑战型.': 37.4,
        '生活型.': 42.4
    }];
    var ds = new DataSet();
    var dv = ds.createView().source(mao_1);
    dv.transform({
        type: 'fold',
        fields: ['管理型.', '技术型.', '安全稳定型.', '创造型.', '自主独立型.', '服务型.', '挑战型.', '生活型.'], // 展开字段集
        key: '月份', // key字段
        value: '月均降雨量' // value字段
    });

    var chart = new G2.Chart({
        container: 'mao_1',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(dv);
    chart.intervalStack().position('月份*月均降雨量').color('name');
    chart.render();

    // 数据分布图
    var mao_2 = [{
        year: '1991',
        value: 3
    }, {
        year: '1992',
        value: 4
    }, {
        year: '1993',
        value: 3.5
    }, {
        year: '1994',
        value: 5
    }, {
        year: '1995',
        value: 4.9
    }, {
        year: '1996',
        value: 6
    }, {
        year: '1997',
        value: 7
    }, {
        year: '1998',
        value: 9
    }, {
        year: '1999',
        value: 13
    }];
    var chart = new G2.Chart({
        container: 'mao_2',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(mao_2);
    chart.scale('value', {
        min: 0
    });
    chart.scale('year', {
        range: [0, 1]
    });
    chart.tooltip({
        crosshairs: {
            type: 'line'
        }
    });
    chart.line().position('year*value');
    chart.point().position('year*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
    });
    chart.render();


    // 分数与平均分差异图
    var mao_3 = [{
        year: '管理型',
        sales: 38
    }, {
        year: '技术/职业型',
        sales: 52
    }, {
        year: '安全/稳定型',
        sales: 61
    }, {
        year: '创造型',
        sales: 145
    }, {
        year: '自主独立型',
        sales: 48
    }, {
        year: '服务型',
        sales: 38
    }, {
        year: '挑战型',
        sales: 38
    }, {
        year: '生活型',
        sales: 38
    }];
    var chart = new G2.Chart({
        container: 'mao_3',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(mao_3);
    chart.scale('sales', {
        tickInterval: 20
    });
    chart.interval().position('year*sales');
    chart.render();

    var nine_3 = [{
        year: '管理型',
        sales: 38
    }, {
        year: '技术/职业型',
        sales: 52
    }, {
        year: '安全/稳定型',
        sales: 61
    }, {
        year: '创造型',
        sales: 145
    }, {
        year: '自主独立型',
        sales: 48
    }, {
        year: '服务型',
        sales: 38
    }, {
        year: '挑战型',
        sales: 38
    }, {
        year: '生活型',
        sales: 38
    }];
    var chart = new G2.Chart({
        container: 'nine_3',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(nine_3);
    chart.scale('sales', {
        tickInterval: 20
    });
    chart.interval().position('year*sales');
    chart.render();
    // 差值绝对NegativeZero常量C=+5
    var mao_4 = [{
        year: '管理型',
        sales: 38
    }, {
        year: '技术/职业型',
        sales: 52
    }, {
        year: '安全/稳定型',
        sales: 61
    }, {
        year: '创造型',
        sales: 145
    }, {
        year: '自主独立型',
        sales: 48
    }, {
        year: '服务型',
        sales: 38
    }, {
        year: '挑战型',
        sales: 38
    }, {
        year: '生活型',
        sales: 38
    }];
    var chart = new G2.Chart({
        container: 'mao_4',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(mao_4);
    chart.scale('sales', {
        tickInterval: 20
    });
    chart.interval().position('year*sales');
    chart.render();

    // 平均分分布图
    var mao_5 = [{
        action: '管理型',
        pv: 100
    }, {
        action: '技术型',
        pv: 80
    }, {
        action: '安全稳定型',
        pv: 60
    }, {
        action: '创造型',
        pv: 40
    }, {
        action: '服务型',
        pv: 20
    }];

    var chart = new G2.Chart({
        container: 'mao_5',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(mao_5);
    chart.axis(false);
    chart.coord('rect').transpose().scale(1, -1);
    chart.intervalSymmetric().position('action*pv').shape('pyramid').color('action', ['#0050B3', '#1890FF', '#40A9FF',
        '#69C0FF', '#BAE7FF'
    ]).label('action*pv', function (action, pv) {
        return action + ' ' + pv;
    }, {
        offset: 35,
        labelLine: {
            lineWidth: 1,
            stroke: 'rgba(0, 0, 0, 0.15)'
        }
    });
    chart.render();

    var nine_4 = [{
        action: '管理型',
        pv: 100
    }, {
        action: '技术型',
        pv: 80
    }, {
        action: '安全稳定型',
        pv: 60
    }, {
        action: '创造型',
        pv: 40
    }, {
        action: '服务型',
        pv: 20
    }];

    var chart = new G2.Chart({
        container: 'nine_4',
        forceFit: true,
        height: 300,
        padding: 'auto'
    });
    chart.source(nine_4);
    chart.axis(false);
    chart.coord('rect').transpose().scale(1, -1);
    chart.intervalSymmetric().position('action*pv').shape('pyramid').color('action', ['#0050B3', '#1890FF', '#40A9FF',
        '#69C0FF', '#BAE7FF'
    ]).label('action*pv', function (action, pv) {
        return action + ' ' + pv;
    }, {
        offset: 35,
        labelLine: {
            lineWidth: 1,
            stroke: 'rgba(0, 0, 0, 0.15)'
        }
    });
    chart.render();

    // 原始得分柱状图
    var mao_7 = [{
        year: '',
        sales: 38
    }, {
        year: '技术/职业型',
        sales: 52
    }, {
        year: '安全/稳定型',
        sales: 61
    }, {
        year: '创造型',
        sales: 145
    }, {
        year: '自主独立型',
        sales: 48
    }, {
        year: '服务型',
        sales: 38
    }, {
        year: '挑战型',
        sales: 38
    }, {
        year: '生活型',
        sales: 38
    }];
    var chart = new G2.Chart({
        container: 'mao_7',
        forceFit: true,
        height: 520,
        padding: 'auto'
    });
    chart.source(mao_7);
    chart.scale('sales', {
        tickInterval: 20
    });
    chart.interval().position('year*sales');
    chart.render();
</script>


</html>